<template>
  <div class="home">
    <div class="massage_top">
      <div class="top_date">
        <div>{{ detaildate }}</div>
        <div>{{ mymonths }}月</div>
      </div>
      <!-- 竖线 -->
      <!-- <div class="top_vertical">
        <div class="verticalBar"></div>
      </div> -->
      <!-- <div class="top_title"><p class="title">知乎日报</p></div> -->
      <!-- 招呼语-->
      <div class="top_title">
        <p>{{ sayhello }}</p>
      </div>
      <div class="top_avatar" @click="gologin">
        <van-image
          class="avatar_image"
          round
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="massage_swipe">
      <van-swipe
        @change="onChange"
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          v-for="(item, index) in zhihutopdata"
          :key="index"
          class="a"
          @click="godetail(item)"
        >
          <van-image fit="cover" :src="item.image" class="myimg"></van-image>
          <div class="swipe_text">
            <div class="text_title">{{ item.title }}</div>
            <div class="text_author">{{ item.hint }}</div>
          </div>
        </van-swipe-item>
        <template #indicator>
          <!-- <div class="custom-indicator">{{ current + 1 }}/6</div> -->
          <div class="custom-indicator">
            <span
              :class="{ active: current == index }"
              v-for="(item, index) in 5"
              :key="index"
            ></span>
          </div>
        </template>
      </van-swipe>
    </div>
    <!-- 信息流 -->
    <!-- <div class="massage_essay">
      <div class="essay_data" v-for="(item, index) in zhihudata" :key="index">
        <div class="essay_content">
          <div class="essay_title" @click="godetail(item)">
            {{ item.title }}
          </div>
          <div class="essay_author">{{ item.hint }}</div>
        </div>
        <div class="essay_image" @click="godetail(item)">
          <img :src="item.images[0]" alt="图片" class="images" />
        </div>
      </div>
    </div> -->
    <!-- 新闻条内容 -->
    <MainView></MainView>
    <!-- <div class="testview">
      <van-button type="primary" @click="gotestview">测试页面</van-button><br><br>
      <van-button type="primary" @click="goabout">about页面</van-button><br><br>
      <van-button type="primary" @click="gotestviewa">测试a页面</van-button>
    </div> -->
    <router-view />
    <!-- <MainViewVue></MainViewVue> -->
  </div>
</template>

<script>
import MainView from "../components/MainView.vue";
// @ is an alias to /src
//import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "HomeView",
  components: {
    MainView,
  },
  data() {
    return {
      zhihudata: [],
      zhihutopdata: [],
      detaildate: "",
      montharr: [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二",
      ],
      current: 0,
      mymonths: "",
      hours: 0,
      ismode: true,
    };
  },
  async created() {
    await this.axios.get("/stories/latest").then((res) => {
      console.log(res.data);
      this.zhihudata = res.data.stories;
      this.zhihutopdata = res.data.top_stories;
      // substr(n,m) 代表从第几位切割，m代表切割位数
      this.detaildate = res.data.date.substr(6, 2);
      var index = res.data.date.substr(4, 2);
      this.mymonths = this.montharr[index - 1];
      console.log(index);
      // console.log("home", this.zhihudata);
      // console.log("date", this.detaildate);
      // console.log("month", this.montharr);
      // 获取当前时间
      let newtime = new Date();
      console.log("time", newtime);
      this.hours = newtime.getHours();
      console.log(this.hours);
    });
  },
  computed: {
    sayhello() {
      if (this.hours <= 10) {
        return "早上好";
      } else if (this.hours <= 18 || this.hours >= 14) {
        // }else if(this.hours >= 14 || this.hours <= 18){
        return "下午好";
      } else if (this.hours <= 24 || this.hours >= 22) {
        return "早点休息";
      } else {
        return "知乎日报";
      }
    },
  },
  methods: {
    gologin(){
      this.$router.push({ name:"Login"});
    },
    gocontent(item) {
      let id = item.id;
      this.$router.push({ name: "Content", query: { id } });
    },
    onChange(index) {
      this.current = index;
    },
    godetail(item) {
      var id = item.id;
      this.$router.push({ name: "Content", query: { id } });
      console.log(id);
    },
    // gotestview() {
    //   this.$router.push({ name: "TestView" });
    // },
    // gotestviewa() {
    //   this.$router.push({ name: "TestViewa" });
    // },
    // goabout() {
    //   this.$router.push({ name: "About" });
    // },
  },
};
</script>
<style  lang="less" scoped>
.home {
  width: 100vw;
  // height: 90rem;
  .massage_top {
    width: 100%;
    height: 4rem;
    // margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    position:fixed;
    left:0;
    top:0;
    // bottom:0;
    z-index:999;
    background-color: white;
    .top_date {
      width: 4rem;
      height: 4rem;
      margin-left: 1rem;
      text-align: center;
      border-right: 1px solid #c4c4c4;
      line-height: 2rem;
    }
    // .top_vertical {
    //   margin-left: -5rem;
    //   .verticalBar {
    //     width: 2px;
    //     height: 50px;
    //     background: #c4c4c4;
    //     display: inline-block;
    //     margin-top: 0.5rem;
    //     vertical-align: top;
    //     margin-right: 0.5rem;
    //     margin-left: 0.5rem;
    //   }
    // }
    .top_title {
      width: 8rem;
      height: 4rem;
      margin-left: -5rem;
      line-height: 1rem;
      font-size: 25px;
      font-weight: bold;
      align-items: center;
    }
    .top_avatar {
      width: 4rem;
      height: 4rem;
      margin-right: 1rem;
      .avatar_image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .massage_swipe {
    margin-top: 1rem;
    .my-swipe {
      .a {
        // position: relative;
        display: flex;
        .myimg {
          // position: relative;
        }
        .swipe_text {
          width: 18rem;
          height: 6rem;
          margin-left: 1rem;
          margin-top: 16rem;
          // z-index: 5;
          position: absolute;
          // background-color: red;
          .text_title {
            width: 18rem;
            font-size: 1.3rem;
            height: 4rem;
            white-space: prare-wp;
            // background-color: green;
            line-height: 2rem;
            text-align: left;
            font-weight: bold;
          }
          .text_author {
            height: 2rem;
            font-size: 0.2rem;
            line-height: 2rem;
            text-align: left;
            // background-color: pink;
          }
        }
      }
      .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        // background: rgba(0, 0, 0, 0.1);
        display: flex;
        margin-bottom: 0.5rem;
        span {
          width: 1.5vw;
          height: 1.5vw;
          background-color: white;
          margin: 2px;
          border-radius: 50%;
          display: block;
        }
      }
      .custom-indicator span.active {
        width: 5.5vw;
        height: 1.5vw;
        border-radius: 30%;
      }
    }
  }
  .massage_essay {
    margin-top: 2rem;
    .essay_data {
      width: 100vw;
      height: 6rem;
      margin-top: 2rem;
      display: flex;
      justify-content: space-between;
      .essay_content {
        margin-left: 1rem;
        .essay_title {
          width: 15rem;
          text-align: left;
          font-weight: bold;
        }
        .essay_author {
          margin-top: 0.5rem;
          text-align: left;
          font-size: 0.5rem;
          color: #c4c4c4;
        }
      }
      .essay_image {
        width: 5rem;
        height: 5rem;
        margin-right: 1rem;
        .images {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
<style  lang="less">
.my-swipe .van-swipe-item {
  // margin-top: 1rem;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 372px;
}
.my-swipe {
  width: 100vw;
  .myimg {
    width: 100%;
  }
}
</style>
